<!DOCTYPE html>
<html lang="zh_hans">
    <!-- title -->




<!-- keywords -->




<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" >
    <meta name="author" content="Apm29">
    <meta name="renderer" content="webkit">
    <meta name="copyright" content="Apm29">
    
    <meta name="keywords" content="hexo,hexo-theme,hexo-blog">
    
    <meta name="description" content="daily post">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>钉钉H5应用踩坑(1) · 生活中的Design</title>
    <style type="text/css">
    @font-face {
        font-family: 'Oswald-Regular';
        src: url("/font/Oswald-Regular.ttf");
    }

    body {
        margin: 0;
    }

    header,
    footer,
    .back-top,
    .sidebar,
    .container,
    .site-intro-meta,
    .toc-wrapper {
        display: none;
    }

    .site-intro {
        position: relative;
        z-index: 3;
        width: 100%;
        /* height: 50vh; */
        overflow: hidden;
    }

    .site-intro-placeholder {
        position: absolute;
        z-index: -2;
        top: 0;
        left: 0;
        width: calc(100% + 300px);
        height: 100%;
        background: repeating-linear-gradient(-45deg, #444 0, #444 80px, #333 80px, #333 160px);
        background-position: center center;
        transform: translate3d(-226px, 0, 0);
        animation: gradient-move 2.5s ease-out 0s infinite;
    }

    @keyframes gradient-move {
        0% {
            transform: translate3d(-226px, 0, 0);
        }
        100% {
            transform: translate3d(0, 0, 0);
        }
    }

</style>

    <link rel="preload" href= "/css/style.css?v=20180824" as="style" onload="this.onload=null;this.rel='stylesheet'" />
    <link rel="stylesheet" href= "/css/mobile.css?v=20180824" media="(max-width: 980px)">
    
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
    
    <!-- /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
/* This file is meant as a standalone workflow for
- testing support for link[rel=preload]
- enabling async CSS loading in browsers that do not support rel=preload
- applying rel preload css once loaded, whether supported or not.
*/ -->
<script>
(function( w ){
	"use strict";
	// rel=preload support test
	if( !w.loadCSS ){
		w.loadCSS = function(){};
	}
	// define on the loadCSS obj
	var rp = loadCSS.relpreload = {};
	// rel=preload feature support test
	// runs once and returns a function for compat purposes
	rp.support = (function(){
		var ret;
		try {
			ret = w.document.createElement( "link" ).relList.supports( "preload" );
		} catch (e) {
			ret = false;
		}
		return function(){
			return ret;
		};
	})();

	// if preload isn't supported, get an asynchronous load by using a non-matching media attribute
	// then change that media back to its intended value on load
	rp.bindMediaToggle = function( link ){
		// remember existing media attr for ultimate state, or default to 'all'
		var finalMedia = link.media || "all";

		function enableStylesheet(){
			link.media = finalMedia;
		}

		// bind load handlers to enable media
		if( link.addEventListener ){
			link.addEventListener( "load", enableStylesheet );
		} else if( link.attachEvent ){
			link.attachEvent( "onload", enableStylesheet );
		}

		// Set rel and non-applicable media type to start an async request
		// note: timeout allows this to happen async to let rendering continue in IE
		setTimeout(function(){
			link.rel = "stylesheet";
			link.media = "only x";
		});
		// also enable media after 3 seconds,
		// which will catch very old browsers (android 2.x, old firefox) that don't support onload on link
		setTimeout( enableStylesheet, 3000 );
	};

	// loop through link elements in DOM
	rp.poly = function(){
		// double check this to prevent external calls from running
		if( rp.support() ){
			return;
		}
		var links = w.document.getElementsByTagName( "link" );
		for( var i = 0; i < links.length; i++ ){
			var link = links[ i ];
			// qualify links to those with rel=preload and as=style attrs
			if( link.rel === "preload" && link.getAttribute( "as" ) === "style" && !link.getAttribute( "data-loadcss" ) ){
				// prevent rerunning on link
				link.setAttribute( "data-loadcss", true );
				// bind listeners to toggle media back
				rp.bindMediaToggle( link );
			}
		}
	};

	// if unsupported, run the polyfill
	if( !rp.support() ){
		// run once at least
		rp.poly();

		// rerun poly on an interval until onload
		var run = w.setInterval( rp.poly, 500 );
		if( w.addEventListener ){
			w.addEventListener( "load", function(){
				rp.poly();
				w.clearInterval( run );
			} );
		} else if( w.attachEvent ){
			w.attachEvent( "onload", function(){
				rp.poly();
				w.clearInterval( run );
			} );
		}
	}


	// commonjs
	if( typeof exports !== "undefined" ){
		exports.loadCSS = loadCSS;
	}
	else {
		w.loadCSS = loadCSS;
	}
}( typeof global !== "undefined" ? global : this ) );
</script>

    <link rel="icon" href= "/assets/favicon.ico" />
    <link rel="preload" href="https://unpkg.com/webfontloader@1.6.28/webfontloader.js" as="script" />
    <link rel="preload" href="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js" as="script" />
    <link rel="preload" href="/scripts/main.js" as="script" />
    <link rel="preload" as="font" href="/font/Oswald-Regular.ttf" crossorigin>
    <link rel="preload" as="font" href="https://at.alicdn.com/t/font_327081_1dta1rlogw17zaor.woff" crossorigin>
    
    <!-- fancybox -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js" defer></script>
    <!-- 百度统计  -->
    
    <!-- 谷歌统计  -->
    
<meta name="generator" content="Hexo 5.4.2"></head>

    
        <body class="post-body">
    
    
<header class="header">

    <div class="read-progress"></div>
    <div class="header-sidebar-menu">&#xe775;</div>
    <!-- post页的toggle banner  -->
    
    <div class="banner">
            <div class="blog-title">
                <a href="/" >生活中的Design.</a>
            </div>
            <div class="post-title">
                <a href="#" class="post-name">钉钉H5应用踩坑(1)</a>
            </div>
    </div>
    
    <a class="home-link" href=/>生活中的Design.</a>
</header>
    <div class="wrapper">
        <div class="site-intro" style="







height:50vh;
">
    
    <!-- 主页  -->
    
    
    <!-- 404页  -->
            
    <div class="site-intro-placeholder"></div>
    <div class="site-intro-img" style="background-image: url(/intro/post-bg.jpg)"></div>
    <div class="site-intro-meta">
        <!-- 标题  -->
        <h1 class="intro-title">
            <!-- 主页  -->
            
            钉钉H5应用踩坑(1)
            <!-- 404 -->
            
        </h1>
        <!-- 副标题 -->
        <p class="intro-subtitle">
            <!-- 主页副标题  -->
            
            
            <!-- 404 -->
            
        </p>
        <!-- 文章页meta -->
        
            <div class="post-intros">
                <!-- 文章页标签  -->
                
                    <div class= post-intro-tags >
    
        <a class="post-tag" href="javascript:void(0);" data-tags = "前端">前端</a>
    
        <a class="post-tag" href="javascript:void(0);" data-tags = "Vue">Vue</a>
    
</div>
                
                
                    <div class="post-intro-read">
                        <span>字数统计: <span class="post-count word-count">1.9k</span>阅读时长: <span class="post-count reading-time">8 min</span></span>
                    </div>
                
                <div class="post-intro-meta">
                    <span class="post-intro-calander iconfont-archer">&#xe676;</span>
                    <span class="post-intro-time">2022/06/22</span>
                    
                    <span id="busuanzi_container_page_pv" class="busuanzi-pv">
                        <span class="iconfont-archer">&#xe602;</span>
                        <span id="busuanzi_value_page_pv"></span>
                    </span>
                    
                    <span class="shareWrapper">
                        <span class="iconfont-archer shareIcon">&#xe71d;</span>
                        <span class="shareText">Share</span>
                        <ul class="shareList">
                            <li class="iconfont-archer share-qr" data-type="qr">&#xe75b;
                                <div class="share-qrcode"></div>
                            </li>
                            <li class="iconfont-archer" data-type="weibo">&#xe619;</li>
                            <li class="iconfont-archer" data-type="qzone">&#xe62e;</li>
                            <li class="iconfont-archer" data-type="twitter">&#xe634;</li>
                            <li class="iconfont-archer" data-type="facebook">&#xe67a;</li>
                        </ul>
                    </span>
                </div>
            </div>
        
    </div>
</div>
        <script>

  // get user agent
  var browser = {
    versions: function () {
      var u = window.navigator.userAgent;
      return {
        userAgent: u,
        trident: u.indexOf('Trident') > -1, //IE内核
        presto: u.indexOf('Presto') > -1, //opera内核
        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
        iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者安卓QQ浏览器
        iPad: u.indexOf('iPad') > -1, //是否为iPad
        webApp: u.indexOf('Safari') == -1, //是否为web应用程序，没有头部与底部
        weixin: u.indexOf('MicroMessenger') == -1, //是否为微信浏览器
        uc: u.indexOf('UCBrowser') > -1 //是否为android下的UC浏览器
      };
    }()
  }
  console.log("userAgent:" + browser.versions.userAgent);

  // callback
  function fontLoaded() {
    console.log('font loaded');
    if (document.getElementsByClassName('site-intro-meta')) {
      document.getElementsByClassName('intro-title')[0].classList.add('intro-fade-in');
      document.getElementsByClassName('intro-subtitle')[0].classList.add('intro-fade-in');
      var postIntros = document.getElementsByClassName('post-intros')[0]
      if (postIntros) {
        postIntros.classList.add('post-fade-in');
      }
    }
  }

  // UC不支持跨域，所以直接显示
  function asyncCb() {
    if (browser.versions.uc) {
      console.log("UCBrowser");
      fontLoaded();
    } else {
      WebFont.load({
        custom: {
          families: ['Oswald-Regular']
        },
        loading: function () {  //所有字体开始加载
          // console.log('loading');
        },
        active: function () {  //所有字体已渲染
          fontLoaded();
        },
        inactive: function () { //字体预加载失败，无效字体或浏览器不支持加载
          console.log('inactive: timeout');
          fontLoaded();
        },
        timeout: 5000 // Set the timeout to two seconds
      });
    }
  }

  function asyncErr() {
    console.warn('script load from CDN failed, will load local script')
  }

  // load webfont-loader async, and add callback function
  function async(u, cb, err) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (cb) { o.addEventListener('load', function (e) { cb(null, e); }, false); }
    if (err) { o.addEventListener('error', function (e) { err(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }

  var asyncLoadWithFallBack = function (arr, success, reject) {
    var currReject = function () {
      reject()
      arr.shift()
      if (arr.length)
        async(arr[0], success, currReject)
    }

    async(arr[0], success, currReject)
  }

  asyncLoadWithFallBack([
    "https://unpkg.com/webfontloader@1.6.28/webfontloader.js",
    "https://cdn.bootcss.com/webfont/1.6.28/webfontloader.js",
    "/lib/webfontloader.min.js"
  ], asyncCb, asyncErr)
</script>
        
        <img class="loading" src="/assets/loading.svg" style="display: block; margin: 6rem auto 0 auto; width: 6rem; height: 6rem;" />
        <div class="container container-unloaded">
            <main class="main post-page">
    <article class="article-entry">
        <h1 id="钉钉H5应用踩坑-1"><a href="#钉钉H5应用踩坑-1" class="headerlink" title="钉钉H5应用踩坑(1)"></a>钉钉H5应用踩坑(1)</h1><p>钉钉H5微应用开发踩坑,钉钉的Webview内核据说是UC浏览器内核,许多CSS/JS的兼容性问题,例如<code>thead/tr</code>不能使用<code>position:sticky</code>, 还有<code>table</code>标签的滚动行为两个端(iOS/Android)不一致,和table的宽度设置相关.在Android端一个overflow-y:auto的容器中,直接放个table(宽度比父容器大),是无法滚动的,而iOS端可以.</p>
<h2 id="兼容全面屏iOS底部动作条"><a href="#兼容全面屏iOS底部动作条" class="headerlink" title="兼容全面屏iOS底部动作条"></a>兼容全面屏iOS底部动作条</h2><ol>
<li>为Html设置meta,主要是设置<code>viewport-fit</code></li>
</ol>
<ul>
<li>Auto：默认值。这个值不影响初始布局视窗，整个 Web 页面是可视的，与Contain表现一致。</li>
<li>Contain：最初的布局视窗和视觉布局视窗被设置为最大的矩形。</li>
<li>Cover：初始布局视窗和视觉布局视窗被设置为设备物理屏幕的限定矩形。<blockquote>
<p>在尺寸较大的设备中，在这些设备上，应用显示区域不一定是全屏的，viewport 是浏览器窗口的大小。<br>在大多数移动设备中，浏览器是全屏的，viewport 是整个屏幕的大小。<br>在全屏模式下，viewport 是设备屏幕的范围，窗口是浏览器窗口，浏览器窗口大小小于或等于视口的大小，并且文档是这个网站，文档的大小可比 viewport 长或宽。概括地说，viewport 基本上是当前文档的可见部分。</p>
</blockquote>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>为需要适配的元素加padding或是margin,<code>constant(safe-area-inset-bottom)</code>,<code>env(safe-area-inset-bottom)</code>在全面屏iOS设备上会获取底部动作栏的inset<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.bottom-bar</span> &#123;</span><br><span class="line">  <span class="attribute">padding-bottom</span>: <span class="built_in">constant</span>(safe-area-inset-bottom); //兼容 IOS&lt;<span class="number">11.2</span></span><br><span class="line">   <span class="attribute">padding-bottom</span>: <span class="built_in">env</span>(safe-area-inset-bottom); //兼容 IOS&gt;<span class="number">11.2</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<ul>
<li>constant(safe-area-inset-top)：在Viewport顶部的安全区域内设置量（CSS像素）</li>
<li>constant(safe-area-inset-bottom)：在Viewport底部的安全区域内设置量（CSS像素）</li>
<li>constant(safe-area-inset-left)：在Viewport左边的安全区域内设置量（CSS像素）</li>
<li>constant(safe-area-inset-right)：在Viewport右边的安全区域内设置量（CSS像素）</li>
</ul>
<h2 id="禁用iOS的WebView回弹效果"><a href="#禁用iOS的WebView回弹效果" class="headerlink" title="禁用iOS的WebView回弹效果"></a>禁用iOS的WebView回弹效果</h2><p>禁用 主要是为了两端一致</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">dd.<span class="title function_">ready</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">   <span class="comment">//禁用iOS Webview弹性效果</span></span><br><span class="line">   dd.<span class="property">ui</span>.<span class="property">webViewBounce</span>.<span class="title function_">disable</span>()</span><br><span class="line"> &#125;)</span><br></pre></td></tr></table></figure>

<h2 id="设置页面标题"><a href="#设置页面标题" class="headerlink" title="设置页面标题"></a>设置页面标题</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">   <span class="keyword">await</span> dd.<span class="property">biz</span>.<span class="property">navigation</span>.<span class="title function_">setTitle</span>(&#123;</span><br><span class="line">      <span class="attr">title</span>: title,</span><br><span class="line">   &#125;)</span><br><span class="line">&#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">   <span class="comment">//无钉钉环境</span></span><br><span class="line">   <span class="variable language_">document</span>.<span class="property">title</span> = title</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="复制文字"><a href="#复制文字" class="headerlink" title="复制文字"></a>复制文字</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> dd <span class="keyword">from</span> <span class="string">&quot;gdt-jsapi&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Notify</span> &#125; <span class="keyword">from</span> <span class="string">&quot;vant&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">ClipboardJS</span> <span class="keyword">from</span> <span class="string">&quot;clipboard&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">copyText</span>(<span class="params">content</span>) &#123;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="keyword">await</span> dd.<span class="title function_">version</span>();</span><br><span class="line">    <span class="keyword">await</span> dd.<span class="title function_">copyToClipboard</span>(&#123; <span class="attr">text</span>: content &#125;);</span><br><span class="line">    <span class="title class_">Notify</span>(&#123;</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&quot;复制成功&quot;</span>,</span><br><span class="line">      <span class="attr">type</span>: <span class="string">&quot;success&quot;</span>,</span><br><span class="line">      <span class="attr">duration</span>: <span class="number">5000</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(e);</span><br><span class="line">    <span class="comment">//非钉钉,回退到使用ClipboardJS</span></span><br><span class="line">    <span class="keyword">const</span> text = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;p&quot;</span>);</span><br><span class="line">    text.<span class="title function_">setAttribute</span>(<span class="string">&quot;data-clipboard-text&quot;</span>, content);</span><br><span class="line">    <span class="keyword">const</span> copy = <span class="keyword">new</span> <span class="title class_">ClipboardJS</span>(text);</span><br><span class="line">    copy.<span class="title function_">on</span>(<span class="string">&quot;success&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="title class_">Notify</span>(&#123;</span><br><span class="line">        <span class="attr">message</span>: <span class="string">&quot;复制成功&quot;</span>,</span><br><span class="line">        <span class="attr">type</span>: <span class="string">&quot;success&quot;</span>,</span><br><span class="line">        <span class="attr">duration</span>: <span class="number">5000</span>,</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;);</span><br><span class="line">    copy.<span class="title function_">on</span>(<span class="string">&quot;error&quot;</span>, <span class="keyword">function</span> (<span class="params">event</span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(event);</span><br><span class="line">      <span class="title class_">Notify</span>(&#123;</span><br><span class="line">        <span class="attr">message</span>: <span class="string">&quot;复制失败&quot;</span>,</span><br><span class="line">        <span class="attr">type</span>: <span class="string">&quot;danger&quot;</span>,</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;);</span><br><span class="line">    text.<span class="title function_">click</span>();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="使用VConsole在线调试"><a href="#使用VConsole在线调试" class="headerlink" title="使用VConsole在线调试"></a>使用VConsole在线调试</h2><p>因为钉钉没有好用的调试工具,而许多问题需要在线调试,所以最好有个线上环境可用的调试工具,VConsole可以当做一个简易的控制台来用. </p>
<h3 id="1-首先引入VConsole"><a href="#1-首先引入VConsole" class="headerlink" title="1.首先引入VConsole"></a>1.首先引入VConsole</h3><p>使用的版本是3.14.6,开启mini控制台很简单,只需要 <code>new VConsole()</code></p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i vconsole</span><br></pre></td></tr></table></figure>
<h3 id="2-给VConsole加全局-临时开关"><a href="#2-给VConsole加全局-临时开关" class="headerlink" title="2.给VConsole加全局/临时开关"></a>2.给VConsole加全局/临时开关</h3><p>因为项目用的Vite + Vue3,全局的开关就放在<code>.env</code>文件中,我们先在<code>.env.production</code>文件里加个变量<code>VITE_OPEN_CONSOLE</code>,不为空时表示默认打开mini控制台</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">MODE=production</span></span><br><span class="line"><span class="string">VITE_OPEN_CONSOLE=1</span></span><br></pre></td></tr></table></figure>
<p>然后,看下main.js,项目在初始化时会自动导入<code>src/modules</code>下的模块,代码如下:</p>
<blockquote>
<p>src/main.js</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = <span class="title function_">createApp</span>(<span class="title class_">App</span>)</span><br><span class="line">app.<span class="title function_">use</span>(router)</span><br><span class="line"><span class="comment">// install all modules under `modules/` 自动导入modules文件夹下的js模块,并且自动注册到vue实例中,需要暴露install方法方法,接收一个参数,包含vue实例</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">values</span>(<span class="keyword">import</span>.<span class="property">meta</span>.<span class="title function_">globEager</span>(<span class="string">&#x27;./modules/*.js&#x27;</span>)).<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">i</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> i.<span class="property">install</span>?.(&#123; app, router &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>我们新建一个<code>console.js</code>作为module引入,导出一个install方法,接收app,router参数. 这里我们通过<code>import(&#39;vconsole&#39;)</code>动态导入VConsole,这样打包时会分成更小的chunk.然后把具体的逻辑放到<code>composables</code>下. 这里的<code>consoleInstance</code>是VConsole当前的实例Ref, <code>isConsoleSupport</code>是初始化时从.env文件获取的开关值<code>Ref&lt;Boolean&gt;</code></p>
<blockquote>
<p>src/modules/console.js</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//测试用</span></span><br><span class="line"><span class="keyword">import</span> &#123; unref &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; useConsole &#125; <span class="keyword">from</span> <span class="string">&#x27;~/composables&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">install</span> = (<span class="params">&#123; app, router &#125;</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; consoleInstance, isConsoleSupport &#125; = <span class="title function_">useConsole</span>()</span><br><span class="line">  <span class="keyword">import</span>(<span class="string">&quot;vconsole&quot;</span>).<span class="title function_">then</span>(<span class="function">(<span class="params">&#123; <span class="keyword">default</span>: VConsole &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="title function_">unref</span>(isConsoleSupport)) &#123;</span><br><span class="line">      consoleInstance.<span class="property">value</span> = <span class="keyword">new</span> <span class="title class_">VConsole</span>()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>再看composables内的useConsole, <code>isConsoleShow</code>是当前是否有打开mini控制台,其他模块如果需要打开,可以调用暴露的<code>toggleConsole</code>方法</p>
<blockquote>
<p>src/composables/console.js</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> consoleInstance = <span class="title function_">ref</span>(<span class="literal">null</span>)</span><br><span class="line"><span class="keyword">const</span> initValue = <span class="title class_">Boolean</span>(<span class="keyword">import</span>.<span class="property">meta</span>.<span class="property">env</span>.<span class="property">VITE_OPEN_CONSOLE</span>);</span><br><span class="line"><span class="keyword">const</span> isConsoleSupport = <span class="title function_">ref</span>(initValue)</span><br><span class="line"><span class="keyword">const</span> isConsoleShow = <span class="title function_">ref</span>(initValue)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">useConsole</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">toggleConsole</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (consoleInstance.<span class="property">value</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (isConsoleShow.<span class="property">value</span>) &#123;</span><br><span class="line">        consoleInstance.<span class="property">value</span>?.<span class="title function_">hideSwitch</span>()</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        consoleInstance.<span class="property">value</span>?.<span class="title function_">showSwitch</span>()</span><br><span class="line">      &#125;</span><br><span class="line">      isConsoleShow.<span class="property">value</span> = !isConsoleShow.<span class="property">value</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="comment">//没有现成实例时重新导入</span></span><br><span class="line">      <span class="keyword">import</span>(<span class="string">&quot;vconsole&quot;</span>).<span class="title function_">then</span>(<span class="function">(<span class="params">&#123; <span class="keyword">default</span>: VConsole &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">        consoleInstance.<span class="property">value</span> = <span class="keyword">new</span> <span class="title class_">VConsole</span>()</span><br><span class="line">      &#125;)</span><br><span class="line">      isConsoleShow.<span class="property">value</span> = <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    consoleInstance,</span><br><span class="line">    isConsoleSupport,</span><br><span class="line">    toggleConsole,</span><br><span class="line">    isConsoleShow</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>然后可以在设置界面加个隐藏的开关,用来打开mini控制台,比如点击版本号N次打开,这里我们学安卓的开发者模式,连续点了8次之后打开开发者模式,顺带打开控制台.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Toast</span> &#125; <span class="keyword">from</span> <span class="string">&quot;vant&quot;</span></span><br><span class="line"><span class="keyword">import</span> &#123; useConsole &#125; <span class="keyword">from</span> <span class="string">&#x27;~/composables&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; unref &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span></span><br><span class="line"><span class="keyword">const</span> isDeveloperModeOpen = <span class="title function_">useLocalStorage</span>(<span class="string">&quot;DEVELOPMENT_MODE&quot;</span>, <span class="literal">false</span>)</span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">MAX_CLICK_COUNT</span> = <span class="number">8</span> <span class="comment">//点8次触发</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">useDeveloperKits</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; vibrate, isSupported &#125; = <span class="title function_">useVibrate</span>(&#123; <span class="attr">pattern</span>: [<span class="number">300</span>, <span class="number">100</span>, <span class="number">300</span>] &#125;)</span><br><span class="line">  <span class="keyword">const</span> tapCount = <span class="title function_">ref</span>(<span class="number">0</span>)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> &#123; consoleInstance, isConsoleSupport, isConsoleShow, toggleConsole &#125; = <span class="title function_">useConsole</span>()</span><br><span class="line"></span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">doOpenDevelopmentMode</span>(<span class="params">openConole</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!<span class="title function_">unref</span>(isConsoleSupport)) &#123;</span><br><span class="line">      isConsoleSupport.<span class="property">value</span> = <span class="literal">true</span></span><br><span class="line">      <span class="keyword">if</span> (!openConole) &#123;</span><br><span class="line">        <span class="title function_">toggleConsole</span>()</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">doCloseDevelopmentMode</span>(<span class="params"></span>) &#123;</span><br><span class="line">    consoleInstance.<span class="property">value</span>?.<span class="title function_">destroy</span>()</span><br><span class="line">    isConsoleSupport.<span class="property">value</span> = <span class="literal">false</span></span><br><span class="line">    isConsoleShow.<span class="property">value</span> = <span class="literal">false</span></span><br><span class="line">    isDeveloperModeOpen.<span class="property">value</span> = <span class="literal">false</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> debouncedOpenDevelopMode = <span class="title function_">useDebounceFn</span>(<span class="function">(<span class="params">openConole</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (tapCount.<span class="property">value</span> &gt;= <span class="variable constant_">MAX_CLICK_COUNT</span>) &#123;</span><br><span class="line">      isDeveloperModeOpen.<span class="property">value</span> = <span class="literal">true</span>;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;开启开发者模式&#x27;</span>);</span><br><span class="line">      <span class="title class_">Toast</span>(<span class="string">&#x27;开启开发者模式&#x27;</span>);</span><br><span class="line">      <span class="title function_">doOpenDevelopmentMode</span>(openConole)</span><br><span class="line">    &#125;</span><br><span class="line">    tapCount.<span class="property">value</span> = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">if</span> (isSupported) &#123;</span><br><span class="line">      <span class="title function_">vibrate</span>();</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, <span class="number">1000</span>)</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">openDeveloperMode</span>(<span class="params">openConole</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (isDeveloperModeOpen.<span class="property">value</span> || tapCount.<span class="property">value</span> &gt;= <span class="variable constant_">MAX_CLICK_COUNT</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span></span><br><span class="line">    &#125;</span><br><span class="line">    tapCount.<span class="property">value</span> += <span class="number">1</span>;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;tapCount&#x27;</span>, tapCount.<span class="property">value</span>);</span><br><span class="line">    <span class="comment">//还剩3次时提示进入开发者模式</span></span><br><span class="line">    <span class="keyword">if</span> (tapCount.<span class="property">value</span> &gt;= (<span class="variable constant_">MAX_CLICK_COUNT</span> - <span class="number">3</span>) &amp;&amp; tapCount.<span class="property">value</span> &lt; <span class="variable constant_">MAX_CLICK_COUNT</span>) &#123;</span><br><span class="line">      <span class="title class_">Toast</span>(<span class="string">`再按<span class="subst">$&#123;MAX_CLICK_COUNT - tapCount.value&#125;</span>次进入开发者模式`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">debouncedOpenDevelopMode</span>(openConole)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    isDeveloperModeOpen,</span><br><span class="line">    doOpenDevelopmentMode,</span><br><span class="line">    openDeveloperMode,</span><br><span class="line">    doCloseDevelopmentMode</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>这里给开发者模式也加了个本地开关的存储,我在App.vue中判断了下,true时直接调用<code>doOpenDevelopmentMode</code>打开开发者模式,这样第一次打开开发者模式,下次重新进入时会自动打开</p>
</blockquote>
<hr>
<blockquote>
<p>setting.vue</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">   //....省略</span><br><span class="line">    &lt;van-cell title=&quot;版本&quot; @click=&quot;openDeveloperMode&quot;&gt;ver 1.0.1&lt;/van-cell&gt;</span><br><span class="line">      &lt;van-cell title=&quot;迷你控制台&quot; v-if=&quot;isConsoleSupport&quot;&gt;</span><br><span class="line">        &lt;van-switch</span><br><span class="line">          size=&quot;1rem&quot;</span><br><span class="line">          :modelValue=&quot;isConsoleShow&quot;</span><br><span class="line">          @update:model-value=&quot;toggleConsole&quot;</span><br><span class="line">        &gt;&lt;/van-switch&gt;</span><br><span class="line">      &lt;/van-cell&gt;</span><br><span class="line"></span><br><span class="line">      &lt;van-cell title=&quot;开发者模式&quot; v-if=&quot;isDeveloperModeOpen&quot;&gt;</span><br><span class="line">        &lt;van-switch</span><br><span class="line">          size=&quot;1rem&quot;</span><br><span class="line">          :modelValue=&quot;isDeveloperModeOpen&quot;</span><br><span class="line">          @update:model-value=&quot;doCloseDevelopmentMode&quot;</span><br><span class="line">        &gt;&lt;/van-switch&gt;</span><br><span class="line">      &lt;/van-cell&gt;</span><br><span class="line">      //....省略</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script setup&gt;</span><br><span class="line">import &#123; useConsole, useDeveloperKits &#125; from &quot;~/composables&quot;;</span><br><span class="line">//开关控制台</span><br><span class="line">const &#123; toggleConsole, isConsoleShow, isConsoleSupport &#125; = useConsole();</span><br><span class="line">//开发者模式</span><br><span class="line">const &#123;</span><br><span class="line">  isDeveloperModeOpen,</span><br><span class="line">  openDeveloperMode,</span><br><span class="line">  doCloseDevelopmentMode,</span><br><span class="line">&#125; = useDeveloperKits();</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>这里用到了VueUse的几个功能,<code>useLocalStorage</code>,<code>useVibrate</code>,<code>useDebounceFn</code>:</p>
<ul>
<li><code>useLocalStorage</code>,吧localStorage存储映射为一个RemovableRef,对Ref的修改会实时反映到localStorage上,反之亦然(默认会listenStorageChange:true)</li>
<li><code>useVibrate</code>,设备震动,具体看VueUse文档吧,挺简单的</li>
<li><code>useDebounceFn</code>,把方法转为防抖的,和lodash的debounce差不多的</li>
</ul>

    </article>
    <!-- license  -->
    
        <div class="license-wrapper">
            <p>原文作者：<a href="https://apm29.github.io">Apm29</a>
            <p>原文链接：<a href="https://apm29.github.io/2022/06/22/%E9%92%89%E9%92%89H5%E5%BA%94%E7%94%A8%E8%B8%A9%E5%9D%91(1)/">https://apm29.github.io/2022/06/22/%E9%92%89%E9%92%89H5%E5%BA%94%E7%94%A8%E8%B8%A9%E5%9D%91(1)/</a>
            <p>发表日期：<a href="https://apm29.github.io/2022/06/22/%E9%92%89%E9%92%89H5%E5%BA%94%E7%94%A8%E8%B8%A9%E5%9D%91(1)/">June 22nd 2022, 6:28:28 am</a>
            <p>更新日期：<a href="https://apm29.github.io/2022/06/22/%E9%92%89%E9%92%89H5%E5%BA%94%E7%94%A8%E8%B8%A9%E5%9D%91(1)/">June 23rd 2022, 10:13:50 am</a>
            <p>版权声明：本文采用<a rel="license noopener" target="_blank" href="http://creativecommons.org/licenses/by-nc/4.0/">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可</p>
        </div>
    
    <!-- paginator  -->
    <ul class="post-paginator">
        <li class="next">
            
                <div class="nextSlogan">Next Post</div>
                <a href= "/2022/07/05/SheetJS%20--%20%E5%89%8D%E7%AB%AF(%E6%B5%8F%E8%A7%88%E5%99%A8)%E5%AF%BC%E5%87%BAExcel%E6%96%87%E4%BB%B6/" title= "SheetJS -- 前端(浏览器)导出Excel文件">
                    <div class="nextTitle">SheetJS -- 前端(浏览器)导出Excel文件</div>
                </a>
            
        </li>
        <li class="previous">
            
                <div class="prevSlogan">Previous Post</div>
                <a href= "/2022/06/20/%E4%BD%BF%E7%94%A8-vue-composition-api/" title= "使用@vue/composition-api">
                    <div class="prevTitle">使用@vue/composition-api</div>
                </a>
            
        </li>
    </ul>
    <!-- 评论插件 -->
    <!-- 来必力City版安装代码 -->

<!-- City版安装代码已完成 -->
    
    
    <!-- partial('_partial/comment/changyan') -->
    <!--PC版-->


    
    

    <!-- 评论 -->
</main>
            <!-- profile -->
            
        </div>
        <footer class="footer footer-unloaded">
    <!-- social  -->
    
    <div class="social">
        
    
        
            
                <a href="mailto:yjw999wow@gmail.com" class="iconfont-archer email" title=email ></a>
            
        
    
        
            
                <a href="//github.com/apm29" class="iconfont-archer github" target="_blank" title=github></a>
            
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    

    </div>
    
    <!-- powered by Hexo  -->
    <div class="copyright">
        <span id="hexo-power">Powered by <a href="https://hexo.io/" target="_blank">Hexo</a></span><span class="iconfont-archer power">&#xe635;</span><span id="theme-info">theme <a href="https://github.com/fi3ework/hexo-theme-archer" target="_blank">Archer</a></span>
    </div>
    <div style="text-align: center">
        <img src="">
        <a href="https://beian.miit.gov.cn/"  style="color:#f72b07" target="_blank">浙ICP备20011000号-1</a>
    </div>
    <!-- 不蒜子  -->
    
    <div class="busuanzi-container">
    
    
    <span id="busuanzi_container_site_pv">PV: <span id="busuanzi_value_site_pv"></span> :)</span>
    
    </div>
    
</footer>

    </div>
    <!-- toc -->
    
    <div class="toc-wrapper" style=
    







top:50vh;

    >
        <div class="toc-catalog">
            <span class="iconfont-archer catalog-icon">&#xe613;</span><span>CATALOG</span>
        </div>
        <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%92%89%E9%92%89H5%E5%BA%94%E7%94%A8%E8%B8%A9%E5%9D%91-1"><span class="toc-number">1.</span> <span class="toc-text">钉钉H5应用踩坑(1)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%BC%E5%AE%B9%E5%85%A8%E9%9D%A2%E5%B1%8FiOS%E5%BA%95%E9%83%A8%E5%8A%A8%E4%BD%9C%E6%9D%A1"><span class="toc-number">1.1.</span> <span class="toc-text">兼容全面屏iOS底部动作条</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A6%81%E7%94%A8iOS%E7%9A%84WebView%E5%9B%9E%E5%BC%B9%E6%95%88%E6%9E%9C"><span class="toc-number">1.2.</span> <span class="toc-text">禁用iOS的WebView回弹效果</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E9%A1%B5%E9%9D%A2%E6%A0%87%E9%A2%98"><span class="toc-number">1.3.</span> <span class="toc-text">设置页面标题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%8D%E5%88%B6%E6%96%87%E5%AD%97"><span class="toc-number">1.4.</span> <span class="toc-text">复制文字</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8VConsole%E5%9C%A8%E7%BA%BF%E8%B0%83%E8%AF%95"><span class="toc-number">1.5.</span> <span class="toc-text">使用VConsole在线调试</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%A6%96%E5%85%88%E5%BC%95%E5%85%A5VConsole"><span class="toc-number">1.5.1.</span> <span class="toc-text">1.首先引入VConsole</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E7%BB%99VConsole%E5%8A%A0%E5%85%A8%E5%B1%80-%E4%B8%B4%E6%97%B6%E5%BC%80%E5%85%B3"><span class="toc-number">1.5.2.</span> <span class="toc-text">2.给VConsole加全局&#x2F;临时开关</span></a></li></ol></li></ol></li></ol>
    </div>
    
    <div class="back-top iconfont-archer">&#xe639;</div>
    <div class="sidebar sidebar-hide">
    <ul class="sidebar-tabs sidebar-tabs-active-0">
        <li class="sidebar-tab-archives"><span class="iconfont-archer">&#xe67d;</span><span class="tab-name">Archive</span></li>
        <li class="sidebar-tab-tags"><span class="iconfont-archer">&#xe61b;</span><span class="tab-name">Tag</span></li>
        <li class="sidebar-tab-categories"><span class="iconfont-archer">&#xe666;</span><span class="tab-name">Cate</span></li>
    </ul>
    <div class="sidebar-content sidebar-content-show-archive">
          <div class="sidebar-panel-archives">
    <!-- 在ejs中将archive按照时间排序 -->
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <div class="total-and-search">
        <div class="total-archive">
        Total : 44
        </div>
        <!-- search  -->
        
    </div>
    
    <div class="post-archive">
    
    
    
    
    <div class="archive-year"> 2022 </div>
    <ul class="year-list">
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/06</span><a class="archive-post-title" href= "/2022/07/06/%E4%BD%BF%E7%94%A8KeepAlive%E5%8A%A8%E6%80%81%E7%BC%93%E5%AD%98%E6%A0%87%E7%AD%BE%E9%A1%B5/" >使用KeepAlive动态缓存标签页</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/05</span><a class="archive-post-title" href= "/2022/07/05/SheetJS%20--%20%E5%89%8D%E7%AB%AF(%E6%B5%8F%E8%A7%88%E5%99%A8)%E5%AF%BC%E5%87%BAExcel%E6%96%87%E4%BB%B6/" >SheetJS -- 前端(浏览器)导出Excel文件</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">06/22</span><a class="archive-post-title" href= "/2022/06/22/%E9%92%89%E9%92%89H5%E5%BA%94%E7%94%A8%E8%B8%A9%E5%9D%91(1)/" >钉钉H5应用踩坑(1)</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">06/20</span><a class="archive-post-title" href= "/2022/06/20/%E4%BD%BF%E7%94%A8-vue-composition-api/" >使用@vue/composition-api</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">06/06</span><a class="archive-post-title" href= "/2022/06/06/Python%E6%B8%85%E9%99%A4NodeModules%E6%96%87%E4%BB%B6%E5%A4%B9%E8%84%9A%E6%9C%AC/" >Python清除NodeModules文件夹脚本</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">06/06</span><a class="archive-post-title" href= "/2022/06/06/%E5%AF%B9%E6%9C%80%E8%BF%91%E5%86%99%E7%9A%84Android%E5%BA%94%E7%94%A8%E7%9A%84%E6%80%BB%E7%BB%93(1)/" >对最近写的Android应用的总结(1)</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">05/31</span><a class="archive-post-title" href= "/2022/05/31/Vite-Plugin-Pages%E4%B8%8EKeep-Alive/" >Vite-Plugin-Pages与Keep-Alive</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">05/27</span><a class="archive-post-title" href= "/2022/05/27/VSCode%E9%85%8D%E7%BD%AE%E4%B8%8E%E6%8F%92%E4%BB%B6(Vue%E5%BC%80%E5%8F%91)/" >VSCode配置与插件（Vue开发）</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">01/19</span><a class="archive-post-title" href= "/2022/01/19/%E9%9D%99%E6%80%81%E7%BD%91%E7%AB%99%E7%94%9F%E6%88%90%E5%99%A8-Gatsby-%E5%AD%A6%E4%B9%A0/" >静态网站生成器 Gatsby 学习</a>
        </li>
    
    
    
    
    
        </ul>
    
    <div class="archive-year"> 2021 </div>
    <ul class="year-list">
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/21</span><a class="archive-post-title" href= "/2021/12/21/Kotlin%E5%8D%8F%E7%A8%8B%E7%9B%B8%E5%85%B3/" >Kotlin协程相关</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">08/09</span><a class="archive-post-title" href= "/2021/08/09/%E5%88%9D%E8%AF%86Ktorm/" >初识Ktorm</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">08/05</span><a class="archive-post-title" href= "/2021/08/05/NUXTJS%E7%9A%84%E5%A4%9A%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/" >NUXTJS的多环境配置</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">08/05</span><a class="archive-post-title" href= "/2021/08/05/NuxtJS%E9%9D%9E%E6%A0%B9%E7%9B%AE%E5%BD%95%E4%B8%8B%E9%83%A8%E7%BD%B2/" >NuxtJS非根目录下部署</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/24</span><a class="archive-post-title" href= "/2021/07/24/%E4%BD%BF%E7%94%A8vue-sfc-rollup%E5%88%9B%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84NPM%E5%BA%93/" >使用vue-sfc-rollup创建自己的NPM库</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/19</span><a class="archive-post-title" href= "/2021/07/19/Certbot%E7%94%9F%E6%88%90Https%E8%AF%81%E4%B9%A6/" >Certbot生成Https证书</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/19</span><a class="archive-post-title" href= "/2021/07/19/Ubuntu%E4%B8%ADMysql5-0%E9%87%8D%E6%96%B0%E5%AE%89%E8%A3%85%E4%B8%8E%E5%88%9D%E5%A7%8B%E5%8C%96/" >Ubuntu中Mysql5.0重新安装与初始化</a>
        </li>
    
    
    
    
    
        </ul>
    
    <div class="archive-year"> 2020 </div>
    <ul class="year-list">
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">10/28</span><a class="archive-post-title" href= "/2020/10/28/JetPack-Navigation%E4%B8%ADFragment%E7%9A%84%E8%BF%94%E5%9B%9E%E9%94%AE%E6%8B%A6%E6%88%AA/" >JetPack-Navigation中Fragment的返回键拦截</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/07</span><a class="archive-post-title" href= "/2020/07/07/Flutter%E5%9B%BD%E9%99%85%E5%8C%96flutter-intl/" >Flutter国际化flutter_intl</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">06/18</span><a class="archive-post-title" href= "/2020/06/18/Vue%E9%A1%B9%E7%9B%AE%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E5%AE%9E%E8%B7%B5%EF%BC%88%E5%AE%9E%E7%8E%B0%E5%8A%A8%E6%80%81%E6%9D%83%E9%99%90%EF%BC%89/" >Vue项目动态路由实践（实现动态权限）</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">05/29</span><a class="archive-post-title" href= "/2020/05/29/%E7%94%A8%E5%88%86%E6%B2%BB%E6%80%9D%E6%83%B3%E9%9D%9E%E9%80%92%E5%BD%92%E8%8E%B7%E5%8F%96N%E4%B8%AA%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0%E7%9A%84%E7%BB%84%E5%90%88/" >用分治思想非递归获取N个数组元素的组合</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">03/23</span><a class="archive-post-title" href= "/2020/03/23/TravisCi-Gradle%E9%83%A8%E7%BD%B2SpringBoot%E9%A1%B9%E7%9B%AE%E5%88%B0aliyun-ECS/" >TravisCi/Gradle部署SpringBoot项目到aliyun ECS</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">01/07</span><a class="archive-post-title" href= "/2020/01/07/Linux-OSX-%E5%91%BD%E4%BB%A4/" >Linux/OSX 命令</a>
        </li>
    
    
    
    
    
        </ul>
    
    <div class="archive-year"> 2019 </div>
    <ul class="year-list">
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/23</span><a class="archive-post-title" href= "/2019/12/23/%E7%94%A8Flutter%E9%87%8D%E6%9E%84%E5%BA%94%E7%94%A8/" >用Flutter重构应用</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/20</span><a class="archive-post-title" href= "/2019/12/20/Docker%E7%AC%94%E8%AE%B0/" >Docker笔记</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/19</span><a class="archive-post-title" href= "/2019/12/19/Hexo/" >Hexo</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/19</span><a class="archive-post-title" href= "/2019/12/19/Android-Text-measure-draw/" >Android Text measure/draw</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/19</span><a class="archive-post-title" href= "/2019/12/19/Flutter-WebView-%E9%94%AE%E7%9B%98%E9%97%AE%E9%A2%98/" >Flutter WebView 键盘问题</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/19</span><a class="archive-post-title" href= "/2019/12/19/Git-Submodule-%E5%AD%90%E6%A8%A1%E5%9D%97/" >Git Submodule(子模块)</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/18</span><a class="archive-post-title" href= "/2019/12/18/Android-Webview%E8%AE%BE%E7%BD%AECookie/" >Android Webview设置Cookie</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/18</span><a class="archive-post-title" href= "/2019/12/18/NPM%E8%AE%BE%E7%BD%AERegistry/" >NPM设置Registry</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/17</span><a class="archive-post-title" href= "/2019/12/17/LiveData/" >LiveData</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/13</span><a class="archive-post-title" href= "/2019/12/13/AndroidDevMetrics/" >AndroidDevMetrics</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/CustomPainter/" >CustomPaint</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/Dart%E5%AD%A6%E4%B9%A0/" >Dart 语法</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/Databinding%20in%20kotlin/" >DataBinding in kotlin</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/Gradle%E5%AD%A6%E4%B9%A0/" >Gradle与Groovy</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/JetpackSetup/" >Jetpack</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/PDFViewerInAndroid/" >PDFViewer on Android</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/Navigation/" >Navigation初探</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/RxCache/" >RxCache</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/RxLifecycle%E5%AD%A6%E4%B9%A0/" >RxLifecycle</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/Spring/" >SpringFrameWork</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/TextView%E4%B8%AD%E6%98%BE%E7%A4%BAHtml%E5%86%85%E5%AE%B9/" >在TextView中显示Html格式的文字</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/flutter/" >Flutter</a>
        </li>
    
    </div>
  </div>
        <div class="sidebar-panel-tags">
    <div class="sidebar-tags-name">
    
        <span class="sidebar-tag-name" data-tags="Android"><span class="iconfont-archer">&#xe606;</span>Android</span>
    
        <span class="sidebar-tag-name" data-tags="JetPack"><span class="iconfont-archer">&#xe606;</span>JetPack</span>
    
        <span class="sidebar-tag-name" data-tags="Tools"><span class="iconfont-archer">&#xe606;</span>Tools</span>
    
        <span class="sidebar-tag-name" data-tags="Linux"><span class="iconfont-archer">&#xe606;</span>Linux</span>
    
        <span class="sidebar-tag-name" data-tags="Flutter"><span class="iconfont-archer">&#xe606;</span>Flutter</span>
    
        <span class="sidebar-tag-name" data-tags="Dart"><span class="iconfont-archer">&#xe606;</span>Dart</span>
    
        <span class="sidebar-tag-name" data-tags="Kotlin"><span class="iconfont-archer">&#xe606;</span>Kotlin</span>
    
        <span class="sidebar-tag-name" data-tags="DataBinding"><span class="iconfont-archer">&#xe606;</span>DataBinding</span>
    
        <span class="sidebar-tag-name" data-tags="Docker"><span class="iconfont-archer">&#xe606;</span>Docker</span>
    
        <span class="sidebar-tag-name" data-tags="Git"><span class="iconfont-archer">&#xe606;</span>Git</span>
    
        <span class="sidebar-tag-name" data-tags="Gradle"><span class="iconfont-archer">&#xe606;</span>Gradle</span>
    
        <span class="sidebar-tag-name" data-tags="Groovy"><span class="iconfont-archer">&#xe606;</span>Groovy</span>
    
        <span class="sidebar-tag-name" data-tags="NPM"><span class="iconfont-archer">&#xe606;</span>NPM</span>
    
        <span class="sidebar-tag-name" data-tags="travisci"><span class="iconfont-archer">&#xe606;</span>travisci</span>
    
        <span class="sidebar-tag-name" data-tags="Fragment"><span class="iconfont-archer">&#xe606;</span>Fragment</span>
    
        <span class="sidebar-tag-name" data-tags="Coroutines"><span class="iconfont-archer">&#xe606;</span>Coroutines</span>
    
        <span class="sidebar-tag-name" data-tags="Shell"><span class="iconfont-archer">&#xe606;</span>Shell</span>
    
        <span class="sidebar-tag-name" data-tags="前端"><span class="iconfont-archer">&#xe606;</span>前端</span>
    
        <span class="sidebar-tag-name" data-tags="nuxtjs"><span class="iconfont-archer">&#xe606;</span>nuxtjs</span>
    
        <span class="sidebar-tag-name" data-tags="Python"><span class="iconfont-archer">&#xe606;</span>Python</span>
    
        <span class="sidebar-tag-name" data-tags="SheetJS"><span class="iconfont-archer">&#xe606;</span>SheetJS</span>
    
        <span class="sidebar-tag-name" data-tags="Spring"><span class="iconfont-archer">&#xe606;</span>Spring</span>
    
        <span class="sidebar-tag-name" data-tags="Springboot"><span class="iconfont-archer">&#xe606;</span>Springboot</span>
    
        <span class="sidebar-tag-name" data-tags="TravisCI"><span class="iconfont-archer">&#xe606;</span>TravisCI</span>
    
        <span class="sidebar-tag-name" data-tags="MySQL"><span class="iconfont-archer">&#xe606;</span>MySQL</span>
    
        <span class="sidebar-tag-name" data-tags="Vue"><span class="iconfont-archer">&#xe606;</span>Vue</span>
    
        <span class="sidebar-tag-name" data-tags="Vite"><span class="iconfont-archer">&#xe606;</span>Vite</span>
    
        <span class="sidebar-tag-name" data-tags="ORM"><span class="iconfont-archer">&#xe606;</span>ORM</span>
    
        <span class="sidebar-tag-name" data-tags="算法"><span class="iconfont-archer">&#xe606;</span>算法</span>
    
        <span class="sidebar-tag-name" data-tags="javascript"><span class="iconfont-archer">&#xe606;</span>javascript</span>
    
        <span class="sidebar-tag-name" data-tags="SSG"><span class="iconfont-archer">&#xe606;</span>SSG</span>
    
        <span class="sidebar-tag-name" data-tags="SEO"><span class="iconfont-archer">&#xe606;</span>SEO</span>
    
    </div>
    <div class="iconfont-archer sidebar-tags-empty">&#xe678;</div>
    <div class="tag-load-fail" style="display: none; color: #ccc; font-size: 0.6rem;">
    缺失模块。<br/>
    1、请确保node版本大于6.2<br/>
    2、在博客根目录（注意不是archer根目录）执行以下命令：<br/>
    <span style="color: #f75357; font-size: 1rem; line-height: 2rem;">npm i hexo-generator-json-content --save</span><br/>
    3、在根目录_config.yml里添加配置：
    <pre style="color: #787878; font-size: 0.6rem;">
jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true</pre>
    </div> 
    <div class="sidebar-tags-list"></div>
</div>
        <div class="sidebar-panel-categories">
    <div class="sidebar-categories-name">
    
        <span class="sidebar-category-name" data-categories="笔记"><span class="iconfont-archer">&#xe60a;</span>笔记</span>
    
        <span class="sidebar-category-name" data-categories="Git"><span class="iconfont-archer">&#xe60a;</span>Git</span>
    
    </div>
    <div class="iconfont-archer sidebar-categories-empty">&#xe678;</div>
    <div class="sidebar-categories-list"></div>
</div>
    </div>
</div> 
    <script>
    var siteMeta = {
        root: "/",
        author: "Apm29"
    }
</script>
    <!-- CDN failover -->
    <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
    <script type="text/javascript">
        if (typeof window.$ === 'undefined')
        {
            console.warn('jquery load from jsdelivr failed, will load local script')
            document.write('<script src="/lib/jquery.min.js">\x3C/script>')
        }
    </script>
    <script src="/scripts/main.js"></script>
    <!-- algolia -->
    
    <!-- busuanzi  -->
    
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    
    <!-- CNZZ  -->
    
    </div>
    <!-- async load share.js -->
    
        <script src="/scripts/share.js" async></script>    
     
    </body>
</html>


